<template>
  <!-- 对数据进行截取 是当前页数-1 乘以 显示条数     当前页数乘以显示条数 -->
  <el-table
   :data="
     filterTableData.slice((currentPage4 - 1) * pageSize4, currentPage4 * pageSize4)
   "
   style="width: 100%"
    >
   <el-table-column prop="date" label="Date" width="180" />
   <el-table-column prop="name" label="Name" width="180" />
   <el-table-column prop="address" label="Address" />
  <!-- 添加输入框 -->
   <el-table-column align="right">
     <template #header>
       <el-input v-model="search" size="small" placeholder="Type to search" />
     </template>
   </el-table-column>
  <!-- 添加输入框 -->
  </el-table>
  <!-- 设置导航 -->
  <!-- 修改下面得属性 -->
  <el-pagination
   layout="total, sizes, prev, pager, next, jumper"
   :total="tableData.length"
   @size-change="handleSizeChange"
   @current-change="handleCurrentChange"
   :current-page="currentPage4"
  />
  </template>
  <script lang="ts" setup>
  import { ref,computed } from "vue";
  // 设置需要的参数与方法
  const currentPage4 = ref(1);
  const pageSize4 = ref(10);
  const search = ref('')
  // 使用计算属性处理数据
  const filterTableData = computed(() =>
  tableData.filter(
   (data) =>
     !search.value ||
     data.name.toLowerCase().includes(search.value.toLowerCase())
  )
  )
  // 修改下面得方法
  const handleSizeChange = (val: number) => {
  //一页显示多少条
  pageSize4.value = val;
  };
  const handleCurrentChange = (val: number) => {
  //页码更改方法
  currentPage4.value = val;
  };
  const tableData = [
  {
   date: "2016-05-03",
   name: "Tom",
   address: "No. 189, Grove St, Los Angeles",
  },
  {
   date: "2016-05-02",
   name: "Tom",
   address: "No. 189, Grove St, Los Angeles",
  },
  {
   date: "2016-05-04",
   name: "Tom",
   address: "No. 189, Grove St, Los Angeles",
  },
  {
   date: "2016-05-01",
   name: "aa",
   address: "No. 189, Grove St, Los Angeles",
  },
  {
   date: "2016-05-01",
   name: "bb",
   address: "No. 189, Grove St, Los Angeles",
  },
  {
   date: "2016-05-01",
   name: "Tom",
   address: "No. 189, Grove St, Los Angeles",
  },
  {
   date: "2016-05-01",
   name: "Tom",
   address: "No. 189, Grove St, Los Angeles",
  },
  {
   date: "2016-05-01",
   name: "Tom",
   address: "No. 189, Grove St, Los Angeles",
  },
  {
   date: "2016-05-01",
   name: "Tom",
   address: "No. 189, Grove St, Los Angeles",
  },
  {
   date: "2016-05-01",
   name: "Tom",
   address: "No. 189, Grove St, Los Angeles",
  },
  {
   date: "2016-05-01",
   name: "Tom",
   address: "No. 189, Grove St, Los Angeles",
  },
  {
   date: "2016-05-01",
   name: "Tom",
   address: "No. 189, Grove St, Los Angeles",
  },
  {
   date: "2016-05-01",
   name: "Tom",
   address: "No. 189, Grove St, Los Angeles",
  },
  {
   date: "2016-05-01",
   name: "Tom",
   address: "No. 189, Grove St, Los Angeles",
  },
  {
   date: "2016-05-01",
   name: "Tom",
   address: "No. 189, Grove St, Los Angeles",
  },
  {
   date: "2016-05-01",
   name: "Tom",
   address: "No. 189, Grove St, Los Angeles",
  },
  {
   date: "2016-05-01",
   name: "Tom",
   address: "No. 189, Grove St, Los Angeles",
  },
  {
   date: "2016-05-01",
   name: "Tom",
   address: "No. 189, Grove St, Los Angeles",
  },
  {
   date: "2016-05-01",
   name: "Tom",
   address: "No. 189, Grove St, Los Angeles",
  },
  {
   date: "2016-05-01",
   name: "Tom",
   address: "No. 189, Grove St, Los Angeles",
  },
  {
   date: "2016-05-01",
   name: "Tom",
   address: "No. 189, Grove St, Los Angeles",
  },
  {
   date: "2016-05-01",
   name: "Tom",
   address: "No. 189, Grove St, Los Angeles",
  },
  ];
  </script>
  <style>
  </style>
